<template>
  <div>
    <div class="ml-2 flex-1">
      <div>
        <a-card :bordered="false" style="height: 830px; width: 1380px">
          <a-form :model="searchForm" layout="inline" class="mt-3" ref="searchFormRef">
            <a-form-item label="收费期" name="year">
              <a-date-picker v-model:value="searchForm.year" picker="year" />
            </a-form-item>
            <a-form-item label="是否减免" name="isReduction">
              <a-select
                v-model:value="searchForm.isReduction"
                placeholder="请选择"
                style="width: 200px"
              >
                <a-select-option value="1">是</a-select-option>
                <a-select-option value="2">否</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="收费状态" name="chargingStatus">
              <a-select
                v-model:value="searchForm.chargingStatus"
                placeholder="请选择"
                style="width: 200px"
              >
                <a-select-option value="1">已开票</a-select-option>
                <a-select-option value="2">未开票</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="业务类型" name="businessType">
              <a-select
                v-model:value="searchForm.businessType"
                placeholder="请选择"
                style="width: 200px"
              >
                <a-select-option value="1">增值税普通发票</a-select-option>
                <a-select-option value="2">增值税专用发票</a-select-option>
                <a-select-option value="3">增值税电子发票</a-select-option>
                <a-select-option value="4">普通发票</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item>
              <a-button
                type="primary"
                class="mr-3"
                :icon="h(SearchOutlined)"
                @click="onSearch"
                >查询</a-button
              >
              <a-button type="primary" :icon="h(RedoOutlined)" class="mr-3"
                @click="onReset"
                >重置</a-button
              >
              <a-button
                type="primary"
                :icon="h(ReconciliationOutlined)"
                class="mr-3"
                >批量减免应收</a-button
              >
              <a-button
                type="primary"
                :icon="h(ReconciliationOutlined)"
                class="mr-3"
                >批量提交记录</a-button
              >
            </a-form-item>
          </a-form>
          <a-table
            :columns="columns"
            :data-source="dataSource"
            bordered
            :pagination="pagination"
            class="mt-5"
            :scroll="{ x: 2000, y: 550 }"
            :row-class-name="
                (_record: any, index: number) =>
                  index % 2 === 1 ? 'table-striped' : null
              "
          >
            <template #bodyCell="{ column, record, text }">
              <template v-if="column.dataIndex === 'active1'">
                <a-button type="link" @click="onAdd_1(record)">新增</a-button>
                <a-button type="link" @click="onRecord_1(record)"
                  >查看</a-button
                >
              </template>
              <template v-if="column.dataIndex === 'active2'">
                <a-button type="link" @click="onAdd_2(record)">新增</a-button>
                <a-button type="link" @click="onRecord_2(record)"
                  >查看</a-button
                >
              </template>
            </template>
          </a-table>
        </a-card>
      </div>
    </div>
    <a-modal
      title="查看应收减免"
      v-model:open="open_1"
      :footer="null"
      width="1200px"
    >
      <a-table
        :columns="columns_modeal_1"
        :data-source="dataSource_modeal_1"
        :row-class-name="
        (_record: any, index: number) =>
          index % 2 === 1 ? 'table-striped' : null
      "
        :pagination="pagination_modeal_1"
        bordered
        class="mt-5"
      >
      </a-table>
    </a-modal>
    <a-modal
      title="查看违约金减免"
      v-model:open="open_2"
      :footer="null"
      width="1200px"
    >
      <a-table
        :columns="columns_modeal_2"
        :data-source="dataSource_modeal_2"
        :row-class-name="
        (_record: any, index: number) =>
          index % 2 === 1 ? 'table-striped' : null
      "
        :pagination="pagination_modeal_2"
        bordered
        class="mt-5"
      >
      </a-table>
    </a-modal>
    <a-modal title="新增应收减免" v-model:open="Add_2" width="600px">
      <a-form
        :model="searchForm_modeal_1"
        layout="inline"
        class="mt-3"
        :label-col="labelCol"
      >
        <a-form-item label="收费年度">
          <a-date-picker
            v-model:value="searchForm_modeal_1.year"
            style="width: 120px"
          />
        </a-form-item>
        <a-form-item label="业务类型">
          <a-select
            v-model:value="searchForm_modeal_1.derateType"
            placeholder="请选择"
            style="width: 120px"
          >
            <a-select-option value="1">减免</a-select-option>
            <a-select-option value="2">增加</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="减免类别">
          <a-select
            v-model:value="searchForm_modeal_1.derateCategory"
            placeholder="请选择"
            style="width: 120px"
          >
            <a-select-option value="金额">金额</a-select-option>
            <a-select-option value="面积">面积</a-select-option>
            <a-select-option value="天数">天数</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="减免方式">
          <a-select
            v-model:value="searchForm_modeal_1.derateWay"
            placeholder="请选择"
            style="width: 120px"
          >
            <a-select-option value="标准">标准</a-select-option>
            <a-select-option value="折扣">折扣</a-select-option>
            <a-select-option value="协议">协议</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="减免金额">
          <a-input-number
            v-model:value="searchForm_modeal_1.derateNumber"
            style="width: 120px"
          />
        </a-form-item>
        <a-form-item label="减免类型">
          <a-select
            v-model:value="searchForm_modeal_1.derateType"
            placeholder="请选择"
            style="width: 120px"
          >
            <a-select-option value="优惠减免">优惠减免</a-select-option>
            <a-select-option value="温度不达标减免"
              >温度不达标减免</a-select-option
            >
            <a-select-option value="低保户减免">低保户减免</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="减免原因">
          <a-textarea
            v-model:value="derateReason"
            placeholder="请输入减免原因"
            :rows="4"
            style="width: 350px"
          />
        </a-form-item>
        <a-form-item label="附件" style="width: 100%">
          <a-upload
            :action="uploadAction"
            :listType="listType"
            :fileList="fileList"
            :onChange="handleChange"
          >
            <a-button> <a-icon type="upload" /> 点击上传 </a-button>
          </a-upload>
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal title="新增违约金减免" v-model:open="Add_1" width="600px">
      <a-form
        :model="searchForm_modeal_2"
        layout="inline"
        class="mt-3"
        :label-col="labelCol"
      >
        <a-form-item label="房间编号">
          <a-input
            v-model:value="searchForm_modeal_2.derateTime"
            style="width: 120px"
            disabled
          />
        </a-form-item>
        <a-form-item label="收费年度">
          <a-input
            v-model:value="searchForm_modeal_2.year"
            style="width: 120px"
            disabled
          />
        </a-form-item>
        <a-form-item label="应收本金">
          <a-input
            v-model:value="searchForm_modeal_2.derateCategory"
            style="width: 120px"
            disabled
          />
        </a-form-item>
        <a-form-item label="应收违约金">
          <a-input
            v-model:value="searchForm_modeal_1.lateFeeReceivable"
            style="width: 120px"
            disabled
          />
        </a-form-item>
        <a-form-item label="减免方式">
          <a-select
            v-model:value="searchForm_modeal_1.derateWay"
            placeholder="请选择"
            style="width: 120px"
          >
            <a-select-option value="标准">标准</a-select-option>
            <a-select-option value="折扣">折扣</a-select-option>
            <a-select-option value="协议">协议</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="减免金额">
          <a-input
            v-model:value="searchForm_modeal_1.derateNumber"
            style="width: 120px"
            disabled
          />
        </a-form-item>
        <a-form-item label="违约金现值">
          <a-input
            v-model:value="searchForm_modeal_1.derateType"
            style="width: 120px"
            disabled
          />
        </a-form-item>
        <a-form-item label="减免类型">
          <a-select
            v-model:value="searchForm_modeal_1.derateType"
            placeholder="请选择"
            style="width: 120px"
          >
            <a-select-option value="优惠减免">优惠减免</a-select-option>
            <a-select-option value="温度不达标减免"
              >温度不达标减免</a-select-option
            >
            <a-select-option value="低保户减免">低保户减免</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="减免原因">
          <a-textarea
            v-model:value="derateReason"
            placeholder="Basic usage"
            :rows="4"
            style="width: 400px"
          />
        </a-form-item>
        <a-form-item label="附件" style="width: 100%">
          <a-upload
            :action="uploadAction"
            :listType="listType"
            :fileList="fileList"
            :onChange="handleChange"
          >
            <a-button> <a-icon type="upload" /> 点击上传 </a-button>
          </a-upload>
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal title="单个减免" v-model:open="only" width="600px"> </a-modal>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, h } from "vue";
import {
  SearchOutlined,
  RedoOutlined,
  ReconciliationOutlined,
} from "@ant-design/icons-vue";
import { getDerateApi, getDerateListApi } from "#/api/core/charge";
import { message } from 'ant-design-vue';
import dayjs from "dayjs";

const open_1 = ref(false);
const open_2 = ref(false);
const Add_1 = ref(false);
const Add_2 = ref(false);
const only = ref(false);
const searchFormRef = ref(null)
const labelCol = { style: { width: "100px" } };
const searchForm_modeal_1 = ref({});
const searchForm_modeal_2 = ref({});
const props = defineProps({
  selectedNodeId: {
    type: Array,
    default: [],
  },
});
const searchForm = reactive({
  year: "",
  isReduction: undefined,
  chargingStatus: undefined,
  businessType: undefined,
  refundStatus: undefined,
  holder: [],
});
const pagination = reactive({
  total: 0,
  pageSize: 10,
  current: 1,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条`,
  onChange: (page: number, pageSize: number) => {
    pagination.current = page;
    pagination.pageSize = pageSize;
    onSearch();
  },
});
const dataSource = ref([]);
const columns = [
  {
    title: "小区名称",
    dataIndex: "village",
    key: "village",
    align: "center",
    width: 80,
  },
  {
    title: "热力卡号",
    dataIndex: "alipayConsNo",
    key: "alipayConsNo",
    align: "center",
    width: 100,
  },
  {
    title: "住户名称",
    dataIndex: "holder",
    key: "holder",
    align: "center",
    width: 100,
  },
  {
    title: "用户地址",
    dataIndex: "houseAddress",
    key: "houseAddress",
    align: "center",
    width: 100,
  },
  {
    title: "收费期",
    dataIndex: "year",
    key: "year",
    align: "center",
    width: 100,
  },
  {
    title: "业务类型",
    dataIndex: "businessType",
    key: "businessType",
    align: "center",
    width: 100,
  },
  {
    title: "项目",
    dataIndex: "name",
    key: "name",
    align: "center",
    width: 100,
  },
  {
    title: "面积名称",
    dataIndex: "areaName",
    key: "areaName",
    align: "center",
    width: 100,
  },
  {
    title: "建筑面积",
    dataIndex: "feeArea",
    key: "feeArea",
    align: "center",
    width: 100,
  },
  {
    title: "应收全费金额",
    dataIndex: "normalReceivable",
    key: "normalReceivable",
    align: "center",
    width: 100,
  },
  {
    title: "减免违约金",
    dataIndex: "active1",
    key: "active1",
    align: "center",
    fixed: "right",
    width: 100,
  },
  {
    title: "减免应收",
    dataIndex: "active2",
    key: "active2",
    align: "center",
    fixed: "right",
    width: 100,
  },
];
const onSearch = () => {
  if (!props.selectedNodeId || props.selectedNodeId.length === 0) {
    message.error('请选择左侧树结构！');
    return;
  } else {
    console.log("searchForm", searchForm);
    const data = {
      headerMessage: {
        year: searchForm.year ? dayjs(searchForm.year).format("YYYY") : "",
        isReduction: searchForm.isReduction ?? "",
        chargingStatus: searchForm.chargingStatus ?? "",
        businessType: searchForm.businessType ?? "",
      },
      treeData: props.selectedNodeId,
      page: pagination.current,
      limit: pagination.pageSize,
    };
    getDerateApi(data).then((res) => {
      console.log("res", res);
      pagination.total = res.total;
      dataSource.value = res.data;
    });
  }
};
const pagination_modeal_1 = reactive({
  total: 0,
  pageSize: 10,
  current: 1,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条`,
  onChange: (page: number, pageSize: number) => {
    pagination_modeal_1.current = page;
    pagination_modeal_1.pageSize = pageSize;
    onRecord_1();
  },
});
const dataSource_modeal_1 = ref([]);
const columns_modeal_1 = [
  {
    title: "小区名称",
    dataIndex: "village",
    key: "village",
    align: "center",
    // width: 80,
  },
  {
    title: "用户地址",
    dataIndex: "houseAddress",
    key: "houseAddress",
    align: "center",
    // width: 80,
  },
  {
    title: "用户姓名",
    dataIndex: "holder",
    key: "holder",
    align: "center",
    // width: 50,
  },
  {
    title: "热力卡号",
    dataIndex: "alipayConsNo",
    key: "alipayConsNo",
    align: "center",
    // width: 80,
  },
  {
    title: "收费期",
    dataIndex: "year",
    key: "year",
    align: "center",
    // width: 80,
  },
  {
    title: "减免日期",
    dataIndex: "derateTime",
    key: "derateTime",
    align: "center",
    // width: 80,
  },
  {
    title: "减免类型",
    dataIndex: "derateType",
    key: "derateType",
    align: "center",
    // width: 80,
  },
  {
    title: "减免类别",
    dataIndex: "derateCategory",
    key: "derateCategory",
    align: "center",
    // width: 80,
  },
  {
    title: "减免方式",
    dataIndex: "derateWay",
    key: "derateWay",
    align: "center",
    // width: 80,
  },
  {
    title: "减免值",
    dataIndex: "derateNumber",
    key: "derateNumber",
    align: "center",
    // width: 80,
  },
  {
    title: "减免金额",
    dataIndex: "derateMoney",
    key: "derateMoney",
    align: "center",
  },
  // {
  //   title: "开始供热日期",
  //   dataIndex: "",
  //   key: "",
  //   align: "center",
  //   width: 120,
  // },
  // {
  //   title: "协议价格",
  //   dataIndex: "",
  //   key: "",
  //   align: "center",
  //   width: 100,
  // },
];
const pagination_modeal_2 = reactive({
  total: 0,
  pageSize: 10,
  current: 1,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条`,
  onChange: (page: number, pageSize: number) => {
    pagination_modeal_2.current = page;
    pagination_modeal_2.pageSize = pageSize;
    onRecord_2();
  },
});
const dataSource_modeal_2 = ref([]);
const columns_modeal_2 = [
  {
    title: "小区名称",
    dataIndex: "village",
    key: "village",
    align: "center",
    // width: 120,
  },
  {
    title: "用户地址",
    dataIndex: "houseAddress",
    key: "houseAddress",
    align: "center",
    // width: 150,
  },
  {
    title: "用户姓名",
    dataIndex: "holder",
    key: "holder",
    align: "center",
    // width: 100,
  },
  {
    title: "热力卡号",
    dataIndex: "alipayConsNo",
    key: "alipayConsNo",
    align: "center",
    // width: 120,
  },
  {
    title: "收费期",
    dataIndex: "year",
    key: "year",
    align: "center",
    // width: 100,
  },
  {
    title: "减免日期",
    dataIndex: "derateTime",
    key: "derateTime",
    align: "center",
    // width: 100,
  },
  // {
  //   title: "减免类型",
  //   dataIndex: "derateType",
  //   key: "derateType",
  //   align: "center",
  //   // width: 100,
  // },
  {
    title: "减免方式",
    dataIndex: "derateWay",
    key: "derateWay",
    align: "center",
    // width: 100,
  },
  {
    title: "减免值",
    dataIndex: "derateNumber",
    key: "derateNumber",
    align: "center",
    // width: 120,
  },
  {
    title: "减免优惠金额",
    dataIndex: "derateMoney",
    key: "derateMoney",
    align: "center",
    // width: 120,
  },
  // {
  //   title: "减免优惠面积",
  //   dataIndex: "",
  //   key: "",
  //   align: "center",
  //   width: 100,
  // },
];
const onRecord_1 = (record?: any) => {
  console.log("record", record);
  const data = {
    areaID: record.areaID,
    year: record.year,
    type: 0,
  };
  getDerateListApi(data).then((res) => {
    dataSource_modeal_1.value = res.data;
    pagination_modeal_1.total = res.total;
    open_1.value = true;
  });
};
const onRecord_2 = (record?: any) => {
  const data = {
    areaID: record.areaID,
    year: record.year,
    type: 1,
  };
  getDerateListApi(data).then((res) => {
    getDerateListApi(data).then((res) => {
      dataSource_modeal_2.value = res.data;
      pagination_modeal_2.total = res.total;
      open_2.value = true;
    });
  });
};
const onAdd_1 = (record?: any) => {
  Add_1.value = true;
};
const onAdd_2 = (record?: any) => {
  Add_2.value = true;
  searchForm_modeal_2.value = { ...record };
};
const onReset = () =>{
  searchFormRef.value.resetFields()
}
</script>
<style scoped>
:deep(.ant-form-item) {
  margin-bottom: 10px !important;
}
</style>
